<template>
  <el-drawer
    v-model="visible"
    title="批量操作"
    direction="rtl"
    size="500px"
    @close="handleClose"
  >
    <div class="batch-operation-content">
      <el-alert
        :title="`已选择 ${selectedRecords.length} 条催款记录`"
        type="info"
        show-icon
        style="margin-bottom: 20px;"
      />
      
      <div class="operation-options">
        <el-card shadow="never" class="operation-card">
          <template #header>
            <div class="card-header">
              <el-icon><Edit /></el-icon>
              <span>批量编辑</span>
            </div>
          </template>
          
          <el-form :model="batchEditForm" label-width="100px" label-position="left">
            <el-form-item label="催款方式">
              <el-select v-model="batchEditForm.collectionMethod" placeholder="请选择催款方式" clearable style="width: 100%">
                <el-option label="电话催款" value="phone" />
                <el-option label="邮件催款" value="email" />
                <el-option label="上门催款" value="visit" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="催款结果">
              <el-input
                v-model="batchEditForm.collectionResult"
                type="textarea"
                placeholder="请输入催款结果"
                :rows="3"
              />
            </el-form-item>
            
            <el-form-item label="下次跟进日期">
              <el-date-picker
                v-model="batchEditForm.nextFollowupDate"
                type="date"
                placeholder="请选择下次跟进日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
            
            <el-form-item label="备注">
              <el-input
                v-model="batchEditForm.notes"
                type="textarea"
                placeholder="请输入备注信息"
                :rows="2"
              />
            </el-form-item>
          </el-form>
        </el-card>
        
        <el-card shadow="never" class="operation-card">
          <template #header>
            <div class="card-header">
              <el-icon><Operation /></el-icon>
              <span>批量操作</span>
            </div>
          </template>
          
          <div class="quick-actions">
            <el-button
              type="primary"
              @click="handleBatchAction('export')"
              style="width: 100%; margin-bottom: 12px;"
            >
              <el-icon><Download /></el-icon>批量导出
            </el-button>
            
            <el-button
              type="warning"
              @click="handleBatchAction('followup')"
              style="width: 100%; margin-bottom: 12px;"
            >
              <el-icon><Bell /></el-icon>批量提醒跟进
            </el-button>
            
            <el-button
              type="danger"
              @click="handleBatchAction('delete')"
              style="width: 100%;"
            >
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
    
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="applyBatchEdit">应用批量编辑</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Operation, Download, Bell, Delete } from '@element-plus/icons-vue'

interface CollectionRecord {
  id: string
  orderInfo: {
    platformOrderId: string
    amount: number
    orderDate: string
  }
  customerInfo: {
    name: string
    contactPerson: string
    phone: string
    email: string
  }
  collectionInfo: {
    collectionId: string
    method: string
    duration: number
    result: string
    collectionTime: string
    operator: string
    notes: string
    isBatch: boolean
    nextFollowupDate: string
    satisfactionScore: number
  }
}

interface BatchEditForm {
  collectionMethod: string
  collectionResult: string
  nextFollowupDate: string
  notes: string
}

interface Props {
  modelValue: boolean
  selectedRecords: CollectionRecord[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'batch-action', action: string, data: any): void
}>()

const visible = ref(false)
const batchEditForm = reactive<BatchEditForm>({
  collectionMethod: '',
  collectionResult: '',
  nextFollowupDate: '',
  notes: ''
})

watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal
  }
)

watch(
  () => visible.value,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

const applyBatchEdit = () => {
  if (props.selectedRecords.length === 0) {
    ElMessage.warning('请先选择要操作的催款记录')
    return
  }
  
  // 检查是否有填写的字段
  const hasEditFields = Object.values(batchEditForm).some(value => value !== '')
  
  if (!hasEditFields) {
    ElMessage.warning('请至少填写一个编辑字段')
    return
  }
  
  ElMessageBox.confirm(
    `确定要对选中的 ${props.selectedRecords.length} 条催款记录应用批量编辑吗？`,
    '批量编辑确认',
    {
      type: 'warning'
    }
  ).then(() => {
    // 应用批量编辑
    emit('batch-action', 'edit', {
      records: props.selectedRecords.map(record => record.id),
      updates: { ...batchEditForm }
    })
    
    // 重置表单
    Object.assign(batchEditForm, {
      collectionMethod: '',
      collectionResult: '',
      nextFollowupDate: '',
      notes: ''
    })
    
    handleClose()
    ElMessage.success('批量编辑已应用')
  }).catch(() => {
    // 取消操作
  })
}

const handleBatchAction = (action: string) => {
  if (props.selectedRecords.length === 0) {
    ElMessage.warning('请先选择要操作的催款记录')
    return
  }
  
  switch (action) {
    case 'export':
      ElMessage.info('批量导出功能开发中')
      break
    case 'followup':
      ElMessageBox.confirm(
        `确定要对选中的 ${props.selectedRecords.length} 条催款记录发送跟进提醒吗？`,
        '批量提醒确认',
        {
          type: 'warning'
        }
      ).then(() => {
        emit('batch-action', 'followup', {
          records: props.selectedRecords.map(record => record.id)
        })
        ElMessage.success('批量提醒已发送')
      })
      break
    case 'delete':
      ElMessageBox.confirm(
        `确定要删除选中的 ${props.selectedRecords.length} 条催款记录吗？`,
        '批量删除确认',
        {
          type: 'error'
        }
      ).then(() => {
        emit('batch-action', 'delete', {
          records: props.selectedRecords.map(record => record.id)
        })
        handleClose()
        ElMessage.success('批量删除成功')
      })
      break
  }
}

const handleClose = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
.batch-operation-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .operation-options {
    flex: 1;
    overflow-y: auto;
    
    .operation-card {
      margin-bottom: 20px;
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .quick-actions {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>